<template>
<el-tooltip
    effect="dark"
    content="查看当前页面代码"
    placement="top-start"
  >
  <div class="btn" @click.stop="showCode">
    <el-icon class="down-icon"><View /></el-icon>
  </div>
</el-tooltip>
<ShowCodeDialog ref="ShowCodeDialogRef" :file="props.file" />
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {View} from '@element-plus/icons-vue';
import ShowCodeDialog from './dialog.vue';

const props = defineProps({
  file:{ 
    type:String,
    default:''
  },
})

const ShowCodeDialogRef = ref();

function showCode() {
  ShowCodeDialogRef.value.showDialog();
}

</script>


<style lang="less" scoped>
.btn{
  width: 40px;
  height: 40px;
  line-height: 3em;
  text-align: center;
  border-radius: 40px;
  background-color: var(--el-color-primary);
  cursor: pointer;
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 1000;

  .down-icon{
    color: #fff;
    font-size: 20px;
  }
}
.btn:hover{
  transition: 0.3s;
  opacity: 0.9;
}
</style>